<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册页</title>


    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/total.css">
    <link rel="stylesheet" href="./font_kx9c3mbtxm/iconfont.css">
    <link rel="stylesheet" href="./css/reg.css">
    <link rel="stylesheet" href="./font_zo3qef7x5yn/iconfont.css">


</head>

<body>

    <!-- 
        需要达到的效果：
           （1） 给一个输入框，现在一旦失去焦点，需要在输入框后面显示一个提示；
           （2）如果用户名存在，在后面提示“用户名已存在”
           （3）如果用户名可用，后面会提示“用户名可用”
           类似163邮箱注册页面
           有的操作：
           （1）首先获取焦点  在span中提示用户名的规则
           （2）失去焦点时   先判断 输入内容是否满足正则：
                            ①如果不满足正则  会提示只能输什么什么
                            ②如果满足，需要发请求，是否发请求在Network里面看，选择XHR可以监听
                            ***发请求，是把输入框的内容发过去了
     -->
    <!-- 首页头部注册部分 -->
    <div class="header-shen">
        <div class="header">
            <ul class="fl">
                <li><a href="reg.html"><span class="iconfont icon-gouwuche"></span></a></li>
                <span>|</span>
                <li><a href="./login.html">你好，未登录<a></li>
                <span>|</span>
                <li class="header1"><a href="./reg.html">免费注册</a></li>
            </ul>
        </div>
    </div>
    <!-- 导航条部分 -->
    <!-- 导航条部分 -->
    <div class="logo-shen">
        <div class="logo">
            <ul class="sub">
                <a href=""><img src="./imgs/logo.jpg" alt=""></a>
                <a href="#">选择购买<span>∨</span></a>
                <a href="./index.html">首页</a>
                <a href="">精选品牌</a>
                <a href="">越境专题</a>
                <a href="#">关于我们<span>∨</span></a>
                <!-- <a href=""><input type="text" value="输入框"></a> -->
            </ul>
            <ul class="wss" style="width: 80px;">
                <li>头发洗护</li>
                <li>身体洗护</li>
                <li>面部洗护</li>
                <li>母婴洗护</li>
                <li>室内香氛</li>
                <li>居家清洁</li>
                <li>寝浴用品</li>
                <li>仪器工具</li>
            </ul>
            <ul class="wbb" style="width: 80px;">
                <li>品牌主张</li>
                <li>创始人故事</li>
                <li>联系我们</li>
            </ul>
            <form action="" class="logo-biao">
                <input type="text" value="输入框"><span class="iconfont icon-sousuo"></span>
            </form>
        </div>
        <div class="line"></div>
        <!-- <input type="text">
            <span></span>
        <br>
        <input type="password">
        <span></span>
        <br>
        <button>注册</button> -->
        <!-- 注册表单 -->
        <div class="biao">
            <h2>用户注册</h2>
            <div class="line-biao"></div>

            <div class="page">
                <div class="page1">
                    <form action="" class="zhuce">

                        <div class="wen1">
                            <p>注册账号</p><input type="text"><span></span>
                        </div>

                        <div class="wen2">
                            <p>设置密码</p>
                            <input type="password" class="mima"><span></span>
                        </div>
                        <div class="wen3">
                            <input type="button" class="btn" onclick="regClick()" value="同意协议并注册">
                        </div>
                    </form>
                </div>
                <!-- qq等图标 -->
                <div class="soft">
                    <h3>使用社交账号登录</h3>
                    <ul class="pic-biao">
                        <li class="iconfont icon-weibo">
                            <span>微博</span>
                        </li>
                        <li class="iconfont icon-QQ">
                            <span>QQ</span>
                        </li>
                        <li class="iconfont icon-weixin">
                            <span>微信</span>
                        </li>
                    </ul>
                </div>
            </div>

        </div>



        <div class="foot-shen">
            <div class="foots">
                <div class="foot">
                    <div class="item foot1">
                        <div>购物指南</div>
                        <div>会员说明</div>
                        <div>积分/优惠券</div>
                        <div>常见问题</div>
                    </div>
                    <div class="item">
                        <div>馥境保障</div>
                        <div>跨境直邮</div>
                        <div>品牌授权</div>
                        <div>正品保证</div>
                    </div>
                    <div class="item">
                        <div>物流配送</div>
                        <div>运费标准</div>
                        <div>物流周期</div>
                    </div>
                    <div class="item">
                        <div>售后服务</div>
                        <div>订单取消</div>
                        <div>退换货说明</div>
                        <div>消费者保障</div>
                    </div>
                    <div class="item foot2">
                        <div>关于我们</div>
                        <div>品牌理念</div>
                        <div>创始人故事</div>
                        <div>联系我们</div>
                        <div>营业执照</div>
                    </div>
                    <div class="footss">
                        <img src="./imgs/bot-code.jpeg" alt="">
                        <ul>
                            <li class="footss1">扫码关注公众号</li>
                            <li>021-58909921</li>
                            <li>9:30-22:30(7*13小时)</li>

                    </div>
                </div>
            </div>
            <div class="footd">
                <div class="footdd">
                    <ul>
                        <li>品牌主张</li>
                        <span>|</span>
                        <li>创始人故事</li>
                        <span>|</span>
                        <li>联系我们</li>
                        <span>|</span>
                        <li>Copyright&copy;馥境2019</li>
                        <span>|</span>
                        <li>All Rights Reserved</li>
                        <span>|</span>
                        <li>浙ICP备15043443号-1</li>
                    </ul>
                </div>
            </div>
        </div>
        <script src="./js/axios.min.js"></script>
        <script src="./js/api.js"></script>
        <!-- 引入注册js -->
        <script src="./js/reg.js"></script>
        <script src="./js/index.js"></script>

</body>

</html>